<template>
  <div class="site-list">
    <HcTable
      :data="tableData.list"
      ref="hcTableRef"
      v-model:queryInfo="tableQueryInfo"
      :searchList="searchList"
      row-key="id"
      border
      stripe
      :padding="20"
      :dataTotal="tableData.total"
      @query-submit="genTableData"
      @page-change="genTableData"
      @table-init="genTableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="位点名称" label="位点名称" />
      <el-table-column prop="name" label="实验名称" />
      <el-table-column prop="Allele1" label="Allele1" />
      <el-table-column prop="Allele1通道" label="Allele1通道" />
      <el-table-column prop="Allele2" label="Allele2" />
      <el-table-column prop="Allele2通道" label="Allele2通道" />
      <el-table-column prop="更新时间" label="更新时间" />
      <el-table-column prop="备注" label="备注" />
      <el-table-column prop="操作" label="操作" />
      <template #btns>
        <HcButton type="silver" :icon="btnIconAdd" :activeIcon="btnIconAddHover" title="新增" />
        <HcButton type="silver" :icon="btnIconDelete" :activeIcon="btnIconDeleteHover" title="删除" />
        <HcButton type="silver" :icon="btnIconImport" :activeIcon="btnIconImportHover" title="导入" />
        <HcButton type="silver" :icon="btnIconExport" :activeIcon="btnIconExportHover" title="导出" />
        <HcButton type="silver" :icon="btnIconDownloadTemplate" :activeIcon="btnIconDownloadTemplateHover" title="下载模板" />
      </template>
    </HcTable>
  </div>
</template>

<script lang="ts" setup>
import HcTable from "/@/components/hc-table/index.vue";
import HcButton from "/@/components/hc-button/index.vue";
import btnIconAdd from "/@/assets/img/add.png";
import btnIconAddHover from "/@/assets/img/add-hover.png";
import btnIconDelete from "/@/assets/img/delete.png";
import btnIconDeleteHover from "/@/assets/img/delete-hover.png";
import btnIconImport from "/@/assets/img/import.png";
import btnIconImportHover from "/@/assets/img/import-hover.png";
import btnIconExport from "/@/assets/img/export.png";
import btnIconExportHover from "/@/assets/img/export-hover.png";
import btnIconDownloadTemplate from "/@/assets/img/download-template.png";
import btnIconDownloadTemplateHover from "/@/assets/img/download-template-hover.png";
const hcTableRef = ref();
const tableData = ref<{
  list: any[];
  total: number;
}>({
  list: [],
  total: 0,
});

const searchList = [
  {
    prop: "name",
    type: "input",
    label: "位点名称",
    placeholder: "请输入位点名称",
    outerShow: true,
    defaultValue: "",
  },
];

const tableQueryInfo = ref({});

const genTableData = () => {
  console.log(tableQueryInfo.value);
  const testData = [];
  for (let i = 0; i < 15; i++) {
    testData.push({
      name: "test" + i,
      id: i + 1,
    });
  }
  tableData.value.list = [...tableData.value.list, ...testData];
  tableData.value.total = 30;
};

const handleSelectionChange = () => {};
</script>

<style lang="scss" scoped>
@use "/src/theme/app.scss";

.site-list {
  @include app.pageHeight(1.428571rem); /* 20/14 */
}
</style>
